"use client";

import { TbPlaylist } from 'react-icons/tb';
import { AiOutlinePlus } from 'react-icons/ai';

import { useUser } from '@/hooks/useUser';
import useAuthModal from '@/hooks/useAuthModal';
import useUploadModal from '@/hooks/useUploadModal';
import { Song } from '@/types';
import MediaItem from './MediaItem';

interface LibraryProps {
  songs: Song[];
}

const Library: React.FC<LibraryProps> = ({ songs }) => {
  //为音乐库新增用户权限检验操作
  const authModal = useAuthModal();
  //为音乐库新增上传音乐的窗口
  const uploadModal = useUploadModal();
  const { user } = useUser();

  const onClick = () => {
    // 为登录状态时 
    if(!user){
      // 打开了登录的窗口
      return authModal.onOpen();
    }

    //打开上传窗口
    return uploadModal.onOpen();

    //上传
  }

  return (
    <div className="flex flex-col">
      {/* 音乐库顶部标题栏 */}
      <div className="
        flex
        items-center
        justify-between
        px-5
        pt-4
      ">
        {/* 播放列表图标 & 标题 */}
        <div className="
          inline-flex
          items-center
          gap-x-2
        ">
          <TbPlaylist className="text-neutral-400" size={26}/>
          <p className="
            text-neutral-400
            font-medium
            text-md
          ">音乐库</p>
        </div>
        {/* 新增播放列表图标 */}
        <AiOutlinePlus onClick={onClick} size={20} className="
          text-neutral-400
          cursor-pointer
          hover:text-white
          transition
        "/>
      </div>
      {/* 音乐库内容区 */}
      <div className="
        flex
        flex-col
        gay-y-2
        mt-4
        px-3
      ">
        {/* 歌单信息 */}
        { songs.map((item) => (
          <MediaItem
            onClick={() => {}}
            key={item.id}
            data={item}
          />
        )) }
      </div>
    </div>
  )
}

export default Library;